<template>
	<div class="login">
		<a-row>
			<a-col :sm="col.xs" :offset="col.offset">
				<a-form :model="user" :rules="rules" @submit.prevent="login" :labelCol="{span:4}">
					<a-divider>用户登录</a-divider>
					<a-form-item hasFeedback label="邮箱地址:" name="account">
						<a-input type="email" autocomplete="new-password" v-model:value.trim="user.account" />
					</a-form-item>
					<a-form-item hasFeedback label="设置密码:" name="password">
						<a-input-password type="password" autocomplete="new-password" v-model:value.trim="user.password" />
					</a-form-item>
					<a-form-item>
						<a-button html-type="submit" type="primary" :loading="loginLoading" block>登录</a-button>
					</a-form-item>
				</a-form>
			</a-col>
		</a-row>
	</div>
</template>

<script>
	import {account,password,warning,success} from "@/antd"
	import pub from "@/lib"
	
	export default {
		name:"Login",
		data() {
			return {
				loginLoading:false,
				col:{
					xs:8,
					offset:8
				},
				user: {
					account: '',
					password: '',
				}
			}
		},
		methods:{
			login(){
				this.loginLoading = true
				this.$store.dispatch('asyncLogin',this.user)
				.then(()=>{
					this.loginLoading = false
					success('登录成功')
					this.$router.push({
						name:"BookmarksClassList"
					})
				}).catch((err)=>{
					this.loginLoading = false
					warning(err)
				})
			}
		},
		mounted() {
			this.col = pub.windowResize(this.col)
			window.addEventListener('resize',this.$_.debounce(()=>{
				this.col = pub.windowResize(this.col)
			},150))
		},
		computed: {
			rules: function() {
				return {
					account,
					password
				}
			}
		}
	}
</script>

<style>
</style>
